<template>
	<view class="login-page">
		<view class="logo-name">
			<view class="text-center ftcolor2 fs-60 font-weight-bold">智村</view>
			<view class="text-center fs-40 ftcolor1">欢迎登录</view>
		</view>

		<view class="bgcolor1 rounded-lg border mx-3 px-3 pt-3 pb-5">
			<view class="flex align-center border-bottom py-5">
				<text class="iconfont icon-shouji mr-2  fs-40 ftcolor1"></text>
				<input type="text" class="flex-1 fs-30 ftcolor1" style="height: 50rpx;line-height: 50rpx;" v-model="mobile"
					placeholder="请输入账号" placeholder-class="placeholder">
			</view>
			<view class="flex align-center border-bottom py-5">
				<text class="iconfont icon-mima1 mr-2  fs-40 ftcolor1"></text>
				<input type="password" class="flex-1 fs-30 ftcolor1" style="height: 50rpx;line-height: 50rpx;"
					v-model="password" placeholder="请输入密码" placeholder-class="placeholder">
			</view>
			<view class="flex align-center border-bottom py-5">
				<text class="iconfont icon-yanzhengma mr-2  fs-40 ft3333"></text>
				<input type="text" class="flex-1 fs-30 ft3333" placeholder="请输入验证码" v-model="captcha_code"
					placeholder-class="placeholder">
				<view class="fs-28 ft3d3c" @click="getCode">
					<image :src="codeUrl" mode="widthFix" style="width: 100px;height: 26px;"></image>
				</view>
			</view>

			<view class="rounded-circle fs-32 text-white flex align-center justify-center py-2 bgcolor2 mt-5" @click="submit">登录
			</view>
			<view class="flex align-center justify-center mt-4"><text class="fs-24 ftcolor3">还没账号吗？</text><text class="fs-24 ftcolor2" @click="signup">注册账号</text></view>
		</view>
	</view>
</template>

<script>
	import BaseApi from '@/api/baseApi'
	export default {
		data() {
			return {
				mobile: '',
				password: '',
				captcha_code: '',
				codeUrl: '',
				captcha_key: ''
			}
		},
		created() {
			uni.clearStorage()
			this.getCode()
		},
		methods: {
			getCode() {
				BaseApi.captcha().then(res => {
					this.codeUrl = res.data.captcha_image
					this.captcha_key = res.data.captcha_key
				})
			},
			submit() {
				if(!this.mobile){
					uni.$tools.toast('请输入账号')
					return
				}
				if(!this.password){
					uni.$tools.toast('请输入密码')
					return
				}
				if(!this.captcha_code){
					uni.$tools.toast('请输入验证码')
					return
				}
				uni.showLoading()
				BaseApi.login({
					mobile: this.mobile,
					password: this.password,
					captcha_code: this.captcha_code,
					captcha_key: this.captcha_key
				}).then(res => {
					uni.showToast({
						title: '登录成功',
					});
					let token = res.data.token;
					this.$store.commit("setToken", token);
					setTimeout(()=>{
						window.location.href = '/'
					},2000)
				}).catch(err => {
					this.getCode()
				})
			},
			signup(){
				uni.redirectTo({
					url:'/pages/login/signup'
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-page {
		.logo-name {
			padding: 100rpx 0;
		}
	}
</style>